<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>瑞吉外卖管理端</title>
    <link rel="shortcut icon" href="favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="plugins/element-ui/index.css" />
    <link rel="stylesheet" href="styles/common.css" />
    <link rel="stylesheet" href="styles/index.css" />
    <link rel="stylesheet" href="styles/icon/iconfont.css" />
    <style>
      .body{
        min-width: 1366px;
      }
      .app-main{
        height: calc(100% - 64px);
      }
      .app-main .divTmp{
        width: 100%;
        height: 100%;
      }
      #member-app  .notAdmin::after{
          border: 0 !important;

      }
      .black{
          background-color: #333333;
          color: #ffffff;
      }
      #center{
          align-content:center;
          margin: 0 auto;
          width: 90%;
      }
      .juzhong{
          /*align-content:center;*/
          /*margin: 0 auto;*/
            padding-left: 50%;
      }
      .meihua{
          margin:auto 0;
          align-content: center;
      }
      * {
          margin: 0;
          padding: 0;
      }

      .wrap {
          width: 500px;
          height: 280px;
          margin: 100px auto;
          perspective: 500px;
          position: relative;
      }

      #wrap-ul {
          width: 500px;
          height: 280px;
          list-style: none;
          position: relative;

      }

      * {
          padding: 0;
          margin: 0;
      }
      /* 清除li前面的圆点 */
      li {
          list-style-type: none;
      }
      .showImg{
          position: relative;
          width: 40%;
          height: 400px;
          width: 600px;
          margin: 100px auto;
          overflow: hidden;
      }
      /* 轮播图片 */
      .showImg img{
          width: 100%;
          height: 100%;
      }

      /* 箭头图标 */
      .iconDiv{
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 30px;
          height: 30px;
          border: 1px solid #666;
          border-radius: 15px;
          background-color: rgba(125,125,125,.2);
          line-height: 30px;
          text-align: center;
          font-size: 25px;
          cursor: pointer;
      }
      .iconDiv:hover{
          background-color: white;
      }
      .icon-left{
          left: 10px;
      }
      .icon-right{
          right: 10px;
      }

      /* 控制圆点 */
      .banner-circle{
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 20px;
      }
      .banner-circle ul{
          margin: 0 50px;
          height: 100%;
          text-align: right;
      }
      .banner-circle ul li{
          display: inline-block;
          width: 14px;
          height: 14px;
          margin: 0 5px;
          border-radius: 7px;
          background-color: rgba(125,125,125,.8);
          cursor: pointer;
      }
      .active{
          background-color: black !important;
      }
      .huanying{
          /*margin: auto 0;*/
          text-align: center;
      }
      .bzd{
          padding-left: 13%;
          display: inline;
      }
    </style>
  </head>

  <body>
    <div class="app" id="app">
      <div class="app-wrapper openSidebar clearfix">
        <!-- sidebar -->
        <div class="sidebar-container">
          <div class="logo">
            <!-- <img src="images/logo.png" width="122.5" alt="" /> -->
            <img src="images/login/login-logo.png" alt="" style="width: 117px; height: 32px" />
          </div>
          <el-scrollbar wrap-class="scrollbar-wrapper">
            <el-menu
              :default-active="defAct"
              :unique-opened="false"
              :collapse-transition="false"
              background-color="#343744"
              text-color="#bfcbd9"
              active-text-color="#f4f4f5"
            >
                <div>
                    <el-row class="tac">
                            <el-menu
                                    default-active="1,2,3,4,5"
                                    class="el-menu-vertical-demo"
                                    @close="handleClose"
                                    background-color="#343744">
                                <a href="View/member.html">
                                <el-menu-item index="1"  >
                                    <i class="el-icon-menu"></i>
                                    <span slot="title">员工管理</span>
                                </el-menu-item></a>
                                <a href="View/cuisine.html">
                                <el-menu-item  index="2" >
                                    <i class="el-icon-menu"></i>
                                    <span slot="title">分类管理</span>
                                </el-menu-item></a>
                                <a href="View/dish.html">
                                <el-menu-item  index="3" >
                                    <i class="el-icon-menu"></i>
                                    <span slot="title">菜品管理</span>
                                </el-menu-item></a>
                                <a href="View/setmeal.html">
                                <el-menu-item  index="4" >
                                    <i class="el-icon-menu"></i>
                                    <span slot="title">套餐管理</span>
                                </el-menu-item>
                                </a>
                                <a href="View/order.html">
                                <el-menu-item  index="5" >
                                    <i class="el-icon-menu"></i>
                                    <span slot="title">订单明细</span>
                                </el-menu-item>
                                </a>
                            </el-menu>
                        </el-col>
                    </el-row>
                </div>
            </el-menu>
          </el-scrollbar>
        </div>
        <div class="main-container">
          <!-- <navbar /> -->
          <div class="navbar">
            <div class="head-lable" id="center">
              <span class="juzhong">后台管理系统</span>
            </div>
            <div class="right-menu">
              <div class="avatar-wrapper">{{ userInfo.name }}</div>
              <img src="images/icons/btn_close@2x.png" class="outLogin" alt="退出" @click="logout" />
            </div>
          </div>



            <div>

                <h1 class="huanying">欢迎来到后台管理系统</h1>

            </div>
            <div class="showImg" >
<!--                //轮播图片-->
                <img  @mouseover="changeInterval(true)"
                      @mouseleave="changeInterval(false)"
                      v-for="(item) in imgArr"
                      :key="item.id"
                      :src="item.url"
                      alt="暂无图片"
                      v-show="item.id===currentIndex"
                >
<!--                //左侧按钮-->
                <div  @click="clickIcon('up')"   class="iconDiv icon-left">
                    <i class="el-icon-caret-left"></i>
                </div>
<!--                //右侧按钮-->
                <div  @click="clickIcon('down')"  class="iconDiv icon-right">
                    <i class="el-icon-caret-right"></i>
                </div>
<!--                //控制圆点-->
                <div class="banner-circle">
                    <ul>
                        <li @click="changeImg(item.id)"
                            v-for="(item) in imgArr"
                            :key="item.id"
                            :class="item.id===currentIndex? 'active': '' "
                        ></li>
                    </ul>
                </div>
            </div>

            <div class="bzd">
            <a href="View/member.html">
                <i class="el-icon-menu"></i>
                <span slot="title">员工管理</span>
            </a>
            </div>
            <div class="bzd">
            <a href="View/cuisine.html">
                <i class="el-icon-menu"></i>
                <span slot="title">分类管理</span>
            </a>
            </div>
            <div class="bzd">
            <a href="View/dish.html">
                <i class="el-icon-menu"></i>
                <span slot="title">菜品管理</span>
            </a>
            </div>
          <div class="bzd">
            <a href="View/setmeal.html">
                <i class="el-icon-menu"></i>
                <span slot="title">套餐管理</span>
            </a>
            </div>
          <div class="bzd">
            <a href="View/order.html">
                    <i class="el-icon-menu"></i>
                    <span slot="title">订单明细</span>
            </a>
            </div>
        </div>
      </div>
    </div>






    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="plugins/axios/axios.min.js"></script>
    <script src="js/request.js"></script>
    <script src="./api/login.js"></script>


    <script>

      new Vue({
        el: '#app',
        data() {
          return {
            defAct: '2',
            userInfo: {},
            // timer: null,
              currentIndex :0,//当前所在图片下标
              timer:null,//定时轮询
              imgArr:[
                  {	id:0,
                      url:"./Lun/1.jpg",
                  },{
                      id:1,
                      url:"./Lun/2.jpg",
                  },{
                      id:2,
                      url:"./Lun/3.jpg",
                  },{
                      id:3,
                      url:"./Lun/4.jpg",
                  },
              ]

          }
        },
        computed: {},
        created() {
            login().then((res)=>{
                console.log()
            })
        },
        methods: {

          logout() {
            logoutApi().then((res)=>{
              if(res.code === 1){
                localStorage.removeItem('userInfo')
                window.location.href = 'View/login.html'
              }
            })
          },
        handleClose(key, keyPath) {
            // console.log(key, keyPath);
        },
            // async init () {
            //     const params = {
            //         name: this.input ? this.input : undefined
            //     }
            // },
            startInterval(){
                // 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
                clearInterval(this.timer);
                this.timer = setInterval(()=>{
                    this.currentIndex++;
                    if(this.currentIndex > this.imgArr.length-1){
                        this.currentIndex = 0
                    }
                },3000)
            },
// 点击左右箭头
            clickIcon(val){
                if(val==='down'){
                    this.currentIndex++;
                    if(this.currentIndex===this.imgArr.length){
                        this.currentIndex = 0;
                    }
                }else{
                    /* 第一种写法
                    this.currentIndex--;
                    if(this.currentIndex < 0){
                        this.currentIndex = this.imgArr.length-1;
                    } */
                    // 第二种写法
                    if(this.currentIndex === 0){
                        this.currentIndex = this.imgArr.length;
                    }
                    this.currentIndex--;
                }
            },
            // 点击控制圆点
            changeImg(index){
                this.currentIndex = index
            },
            //鼠标移入移出控制
            changeInterval(val){
                if(val){
                    clearInterval(this.timer)
                }else{
                    this.startInterval()
                }
            },
        },
          //进入页面后启动定时轮询
          mounted(){
              this.startInterval()
          }
      })
    </script>


  </body>
</html>
